<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>slot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> -->
    <script src="../../static/vue.js"></script>
</head>

<body>
    <div id="app">
        <todo-list v-bind:todos="todos">
            <!-- 将 `slotProps` 定义为插槽作用域的名字 -->
            <template slot-scope="{todo}">
                <!-- 为待办项自定义一个模板，-->
                <!-- 通过 `slotProps` 定制每个待办项。-->
                <span v-if="todo.isComplete">✓</span>
                {{ todo.text }}
            </template>
            <template slot="todo2" slot-scope="{todo}">
                <span v-if="todo.isComplete">✓</span>
                xxxxxxxxxxxxxxxxx{{ todo.text }} 
            </template>
        </todo-list>
    </div>
    <script>
        Vue.component('todo-list', {
            props: ['todos'],
            template: `<ul>
                        <li
                            v-for="todo in todos"
                            v-bind:key="todo.id">
                            <slot v-bind:todo="todo">
                            {{ todo.text }}
                            </slot>
                            <slot name='todo2' v-bind:todo="todo"></slot>
                        </li>
                    </ul>`
        })
        new Vue({
            el:'#app' ,
            data(){
                return {
                    todos:[{
                        id:1,
                        text:'写个table',
                        isComplete:false
                    },{
                        id:2,
                        text:'写个button',
                        isComplete:true
                    }]
                }
            }   
        })
    </script>

</body>

</html>